<script lang="ts" setup>
import { computed, ref } from 'vue';

import {
  Button,
  Card,
  Col,
  message,
  Row,
  Slider,
  Switch,
  Typography,
} from 'ant-design-vue';

const props = defineProps<Props>();

const { Title, Text } = Typography;

interface ControlItem {
  id: string;
  name: string;
  type: 'button' | 'display' | 'slider' | 'switch';
  value: any;
  min?: number;
  max?: number;
  step?: number;
  unit?: string;
  options?: { label: string; value: any }[];
}

interface Props {
  deviceId: string;
  deviceName: string;
  deviceType: string;
}

// 控制加载状态
const controlLoading = ref(false);

// 根据设备类型生成控制项
const controlItems = computed(() => {
  const items: ControlItem[] = [];

  switch (props.deviceType) {
    case 'ac': {
      items.push(
        {
          id: 'power',
          name: '电源',
          type: 'switch',
          value: true,
        },
        {
          id: 'temperature',
          name: '温度',
          type: 'slider',
          value: 24,
          min: 16,
          max: 30,
          step: 1,
          unit: '°C',
        },
        {
          id: 'mode',
          name: '模式',
          type: 'display',
          value: 'cool',
          options: [
            { label: '制冷', value: 'cool' },
            { label: '制热', value: 'heat' },
            { label: '送风', value: 'fan' },
            { label: '除湿', value: 'dry' },
          ],
        },
      );
      break;
    }

    case 'curtain': {
      items.push(
        {
          id: 'power',
          name: '电源',
          type: 'switch',
          value: true,
        },
        {
          id: 'position',
          name: '位置',
          type: 'slider',
          value: 50,
          min: 0,
          max: 100,
          step: 5,
          unit: '%',
        },
        {
          id: 'auto_mode',
          name: '自动模式',
          type: 'switch',
          value: false,
        },
      );
      break;
    }

    case 'lighting': {
      items.push(
        {
          id: 'power',
          name: '电源',
          type: 'switch',
          value: true,
        },
        {
          id: 'brightness',
          name: '亮度',
          type: 'slider',
          value: 80,
          min: 0,
          max: 100,
          step: 5,
          unit: '%',
        },
        {
          id: 'color_temp',
          name: '色温',
          type: 'slider',
          value: 3000,
          min: 2000,
          max: 6500,
          step: 100,
          unit: 'K',
        },
      );
      break;
    }

    case 'lock': {
      items.push(
        {
          id: 'lock_status',
          name: '锁状态',
          type: 'switch',
          value: true,
        },
        {
          id: 'auto_lock',
          name: '自动锁定',
          type: 'switch',
          value: false,
        },
        {
          id: 'unlock',
          name: '远程解锁',
          type: 'button',
          value: null,
        },
      );
      break;
    }

    case 'sensor': {
      items.push(
        {
          id: 'sensitivity',
          name: '灵敏度',
          type: 'slider',
          value: 50,
          min: 0,
          max: 100,
          step: 10,
          unit: '%',
        },
        {
          id: 'threshold',
          name: '阈值',
          type: 'slider',
          value: 25,
          min: 0,
          max: 50,
          step: 5,
          unit: '',
        },
      );
      break;
    }

    default: {
      items.push({
        id: 'power',
        name: '电源',
        type: 'switch',
        value: false,
      });
    }
  }

  return items;
});

// 处理开关控制
const handleSwitch = (control: ControlItem, checked: boolean) => {
  controlLoading.value = true;

  // 模拟API调用
  setTimeout(() => {
    control.value = checked;
    message.success(`${control.name}已${checked ? '开启' : '关闭'}`);
    controlLoading.value = false;
  }, 1000);
};

// 处理滑块控制
const handleSlider = (control: ControlItem, value: number) => {
  controlLoading.value = true;

  // 模拟API调用
  setTimeout(() => {
    control.value = value;
    message.success(`${control.name}已设置为${value}${control.unit || ''}`);
    controlLoading.value = false;
  }, 500);
};

// 处理按钮控制
const handleButton = (control: ControlItem) => {
  controlLoading.value = true;

  // 模拟API调用
  setTimeout(() => {
    message.success(`${control.name}操作执行成功`);
    controlLoading.value = false;
  }, 1000);
};

// 渲染控制项函数已移除，现在使用模板语法
</script>

<template>
  <div class="device-control-panel">
    <Card :title="`设备控制 - ${deviceName}`" class="control-card">
      <Row :gutter="[16, 16]">
        <Col v-for="control in controlItems" :key="control.id" :span="12">
          <div class="control-item">
            <div class="control-label">
              <Text>{{ control.name }}</Text>
            </div>
            <div class="control-value">
              <template v-if="control.type === 'switch'">
                <Switch
                  :checked="control.value"
                  :loading="controlLoading"
                  @change="(checked) => handleSwitch(control, checked)"
                />
              </template>
              <template v-else-if="control.type === 'slider'">
                <Slider
                  :value="control.value"
                  :min="control.min"
                  :max="control.max"
                  :step="control.step"
                  :disabled="controlLoading"
                  @change="(value) => handleSlider(control, value)"
                />
                <div class="slider-value">
                  {{ control.value }}{{ control.unit }}
                </div>
              </template>
              <template v-else-if="control.type === 'button'">
                <Button
                  type="primary"
                  :loading="controlLoading"
                  @click="handleButton(control)"
                >
                  {{ control.name }}
                </Button>
              </template>
              <template v-else-if="control.type === 'display'">
                <Text>
                  {{
                    control.options?.find((opt) => opt.value === control.value)
                      ?.label || control.value
                  }}
                </Text>
              </template>
            </div>
          </div>
        </Col>
      </Row>
    </Card>
  </div>
</template>

<style scoped>
.device-control-panel {
  padding: 16px;
}

.control-card {
  background: white;
}

.control-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border: 1px solid #f0f0f0;
  border-radius: 6px;
}

.control-label {
  font-weight: 500;
  color: #333;
}

.control-value {
  display: flex;
  gap: 8px;
  align-items: center;
}

.slider-value {
  min-width: 60px;
  text-align: right;
  font-size: 12px;
  color: #666;
}

:deep(.ant-slider) {
  flex: 1;
}

:deep(.ant-switch) {
  margin-right: 8px;
}
</style>
